import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { VxeTableDataRow } from 'vxe-table'
import type { AnyObject } from 'ant-design-vue/es/_util/type'
import type { FilterDto } from '@/render/FilterRender'
import { AccountStateCnEnum, AccountTypeCnEnum, getKeyToEnum, ProductTypeCnEnum } from '@/const/enum'
import { getAccountList } from '@/api/pay'
import PreviewImageOrPdf from '@/components/preview-media/PreviewImageOrPdf'
import type { AccountDetailDto } from '@/api/pay/types'

@Component
export class AccountDetails extends TableRender {

    @Prop() companyId!: number

    filterConfig() {
        return {
            selectType: {
                name: '充值类型',
                element: 'select',
                options: getKeyToEnum(AccountTypeCnEnum, true, ['充值', '提现', '转账'])
            },
            productType: {
                name: '产品类型',
                element: 'select',
                options: getKeyToEnum(ProductTypeCnEnum, true, ['长期保', '日日保', '子弹发薪', '电子签', '团意日保'])
            },
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'productType',
            title: '产品',
            formatter: ({ row }) => {
                return ProductTypeCnEnum[row.productType]
            }
        },
        {
            field: 'operateAmount',
            title: '充值金额',
            slots: {
                default: 'price'
            }
        },
        {
            field: 'status',
            title: '状态',
            params: {
                colors: {
                    0: 'blue-100',
                    1: 'green',
                    2: 'red',
                    3: 'blue-100',
                    4: 'green',
                    5: 'green',
                }
            },
            formatter: ({ row }) => {
                return AccountStateCnEnum[row.status]
            },
            slots: {
                default: 'status'
            }
        },
        {
            field: 'createTime',
            title: '操作时间',
            width: 160
        },
        {
            field: 'remark',
            title: '备注',
        },
        {
            field: 'voucherUrl',
            title: '充值凭证',
            slots: {
                default: ({ row }) => {
                    return <PreviewImageOrPdf src={row.voucherUrl} />
                }
            }
        },
    ] as TableRenderColumnTypes<AccountDetailDto>

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getAccountList({
            pageNum: page,
            pageSize: size,
            companyId: this.companyId,
            ...filters
        })
    }

    render() {
        return <>
            {super.render()}
        </>
    }
}

export default toNative<{companyId: number}, {}>(AccountDetails)